<template>
	<view class="content">
		<image src="../../../static/home/home-bg.png" mode="widthFix" class="top-img"></image>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'我要投诉'"></CustomNav>
		<view class="info-block">
			<view class="menu-block">
				<view class="menu-item1">
					<view class="round">1</view>
					<view class="txt">阅读须知</view>
				</view>
				<view class="line"></view>
				<view class="menu-item1">
					<view class="round">2</view>
					<view class="txt">填写信息</view>
				</view>
				<view class="line"></view>
				<view class="menu-item">
					<view class="round">3</view>
					<view class="txt">投诉内容</view>
				</view>
			</view>
			<view class="text-block">
				<view class="info-list">
					<view class="info-item">
						<!-- <view class="must">*</view> -->
						<view class="name">投诉领域</view>
					</view>
					<radio-group @change="radioChange">
						<label class="radio-list" v-for="(item,index) in areaList" :key="item.id">
							<view class="radio-item">
								<radio class="check" :value="item.id" :checked="index === current" color="#027BFF">
								</radio>
								<label class="title">{{item.name}}</label>
							</view>
						</label>
					</radio-group>
				</view>
				<template v-if="form.type==2">
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">所属行业</view>
						</view>
						<view class="form-content">
							<picker class="form-ctrl" :range="industry" range-key="name" :value="industryIndex"
								@change="bindIndustry">
								{{industryIndex==-1 ? "请选择所属行业" : industry[industryIndex]['name']}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">反映人姓名</view>
						</view>
						<input v-model="form.reflectorName" placeholder="请输入反映人姓名" class="info-crl" maxlength="10"
							type="text" />
					</view>

					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">反映人身份证照片</view>
						</view>
						<view class="img-item">
							<view class="obverse-item">
								<image :src="form.idCardFront" v-if="form.idCardFront.length>0" class="upload-img"
									mode="aspectFit">
								</image>
								<view class="photo" v-else @click="chooseImage(1)">
									<image src="/static/home/idCardFront.png" class="upload-img" mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="obverse-item">
								<image :src="form.idCardBack" v-if="form.idCardBack" class="upload-img"
									mode="aspectFit">
								</image>
								<view class="photo" v-else @click="chooseImage(2)">
									<image src="/static/home/idCardBack.png" class="upload-img" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">反映人电话</view>
						</view>
						<input v-model="form.reflectorMobile" placeholder="请输入反映人电话" class="info-crl" maxlength="11"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">是否签订劳动合同</view>
						</view>
						<view class="form-content">
							<picker class="form-ctrl" :range="work" range-key="value" :value="workIndex"
								@change="bindWork">
								{{workIndex==-1 ? "请选择是否签订劳动合同" : work[workIndex]['value']}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">欠薪负责人姓名</view>
						</view>
						<input v-model="form.salaryName" placeholder="请输入欠薪负责人姓名" class="info-crl" maxlength="11"
							type="text" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">欠薪负责人电话</view>
						</view>
						<input v-model="form.salaryMobile" placeholder="请输入欠薪负责人电话" class="info-crl" maxlength="11"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">实际用工所在地</view>
						</view>
						<view class="form-content">
							<input v-model="form.actualLocation" @click="chosenPosition" type="text"
								placeholder="请选择工作地址" disabled="true" placeholder-class="inputPlaceholder"
								class="form-ctrl" />
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">详细地址</view>
						</view>
						<input v-model="form.address" placeholder="请输入详细地址" class="info-crl" type="text"
							maxlength="30" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">用人单位名称</view>
						</view>
						<input v-model="form.unitName" placeholder="请输入用人单位名称" class="info-crl" type="text"
							maxlength="30" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪人数（人）</view>
						</view>
						<input v-model="form.salaryCount" placeholder="请输入欠薪人数" class="info-crl" maxlength="4"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪金额（元）</view>
						</view>
						<input v-model="form.salaryAmount" placeholder="请输入欠薪金额" class="info-crl" maxlength="7"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪发生开始时间</view>
						</view>
						<view class="form-content">
							<!-- <view class="example-body">
								<uni-datetime-picker :start="2021-3-20" v-model="form.salaryTime" type="daterange"
									@maskClick="maskClick($event,'date')" :end="form.date" />
							</view> -->
							<picker mode="date" value="YYYY-MM-DD" :value="form.starTime" @change="changeTime"
								:end="endDate">
								{{form.starTime}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪发生结束时间</view>
						</view>
						<view class="form-content">
							<!-- <view class="example-body">
								<uni-datetime-picker :start="2021-3-20" v-model="form.salaryTime" type="daterange"
									@maskClick="maskClick($event,'date')" :end="form.date" />
							</view> -->
							<picker mode="date" value="YYYY-MM-DD" :value="form.endTime" @change="changeEndTime"
								:start="form.starTime" :end="endDate">
								{{form.endTime}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item" style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<!-- <view class="must">*</view> -->
								<view class="name">欠薪基本情况摘要</view>
							</view>
							<view class="formwork" @click="openItem">使用模板</view>
						</view>
						<textarea v-model="form.information" placeholder="请简述欠薪基本情况以方便调查人员核实处理" class="info-crl"
							maxlength="300"></textarea>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">是否曾经通过以下途径反映上述情况（可多选）</view>
						</view>
						<checkbox-group @change="checkboxChange">
							<label class="form-content" v-for="item in road" :key="item.id">
								<view style="margin-top: 30rpx;display: flex;">
									<checkbox :value="item.id" class="check" color="#027BFF" />
									<view>{{item.name}}</view>
								</view>
							</label>
						</checkbox-group>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">证据材料上传({{form.pic.length+form.video.length}}/5)</view>
						</view>
						<view class="upload">
							<view v-for="(item,index) in form.pic" class="image-item" :key="index">
								<image mode="aspectFit" :src="item" @click="previewImg(item)" class="img">
								</image>
								<view @click="closeImg(index,1)" style="display: inline;">
									<view class="iconfont">
										<image src="/static/home/delete.png" class="delete"></image>
									</view>
								</view>
							</view>
							<view v-for="(item,index) in form.video" class="image-item">
								<video id="myVideo" class="img"
									style="width: 190rpx;height: 200rpx;border-radius: 20rpx;" :src="item"
									@error="videoErrorCallback" show-fullscreen-btn></video>
								<view @click="closeImg(index,2)" style="display: inline;">
									<view class="iconfont">
										<image src="/static/home/delete.png" class="delete"></image>
									</view>
								</view>
							</view>
							<view class="upload-content" v-if="(form.pic.length+form.video.length)<5"
								@click="chooseMedia">
								<image src="/static/home/upload.png" class="upload"></image>
							</view>
							<!-- <view class="upload-content" v-if="form.pic.length<5" @click="chooseVideo">
								<image src="/static/home/upload3.png" class="upload"></image>
							</view> -->
						</view>
					</view>
				</template>
				<template v-else>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">所属行业</view>
						</view>
						<view class="form-content">
							<picker class="form-ctrl" :range="industry" range-key="name" :value="industryIndex"
								@change="bindIndustry">
								{{industryIndex==-1 ? "请选择所属行业" : industry[industryIndex]['name']}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">反映人姓名</view>
						</view>
						<input v-model="form.reflectorName" placeholder="请输入反映人姓名" class="info-crl" maxlength="10"
							type="text" />
					</view>


					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">反映人身份证照片</view>
						</view>
						<view class="img-item">
							<view class="obverse-item">
								<image :src="form.idCardFront" v-if="form.idCardFront.length>0" class="upload-img"
									mode="aspectFit"></image>
								<view class="photo" v-else @click="chooseImage(1)">
									<image src="/static/home/idCardFront.png" class="upload-img" mode="aspectFit">
									</image>
								</view>
							</view>
							<view class="obverse-item">
								<image :src="form.idCardBack" v-if="form.idCardBack" class="upload-img"
									mode="aspectFit">
								</image>
								<view class="photo" v-else @click="chooseImage(2)">
									<image src="/static/home/idCardBack.png" class="upload-img" mode="aspectFit">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">反映人电话</view>
						</view>
						<input v-model="form.reflectorMobile" placeholder="请输入反映人电话" class="info-crl" maxlength="11"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">拖欠工资项目名称</view>
						</view>
						<input v-model="form.projectName" placeholder="请输入拖欠工资项目名称" class="info-crl" maxlength="50" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">是否签订劳动合同</view>
						</view>
						<view class="form-content">
							<picker class="form-ctrl" :range="work" range-key="value" :value="workIndex"
								@change="bindWork">
								{{workIndex==-1 ? "请选择是否签订劳动合同" : work[workIndex]['value']}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">欠薪负责人姓名</view>
						</view>
						<input v-model="form.salaryName" placeholder="请输入欠薪负责人姓名" class="info-crl" maxlength="11"
							type="text" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">欠薪负责人电话</view>
						</view>
						<input v-model="form.salaryMobile" placeholder="请输入欠薪负责人电话" class="info-crl" maxlength="11"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">实际用工所在地</view>
						</view>
						<view class="form-content">
							<input v-model="form.actualLocation" @click="chosenPosition" type="text"
								placeholder="请选择工作地址" disabled="true" placeholder-class="inputPlaceholder"
								class="form-ctrl" />
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">详细地址</view>
						</view>
						<input v-model="form.address" placeholder="请输入详细地址" class="info-crl" type="text"
							maxlength="30" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">建设单位</view>
						</view>
						<input v-model="form.unitName" placeholder="请输入建设单位名称" class="info-crl" type="text"
							maxlength="30" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">施工单位名称</view>
						</view>
						<input v-model="form.constructionName" placeholder="请输入施工单位名称" class="info-crl" type="text"
							maxlength="30" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">分包单位名称</view>
						</view>
						<input v-model="form.subpackageName" placeholder="请输入分包单位名称" class="info-crl" type="text"
							maxlength="30" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪人数（人）</view>
						</view>
						<input v-model="form.salaryCount" placeholder="请输入欠薪人数" class="info-crl" maxlength="4"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪金额（元）</view>
						</view>
						<input v-model="form.salaryAmount" placeholder="请输入欠薪金额" class="info-crl" maxlength="7"
							type="number" />
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪发生开始时间</view>
						</view>
						<view class="form-content">
							<!-- <view class="example-body">
								<uni-datetime-picker :start="2021-3-20" v-model="form.salaryTime" type="daterange"
									@maskClick="maskClick($event,'date')" :end="form.date" />
							</view> -->
							<picker mode="date" value="YYYY-MM-DD" :value="form.starTime" @change="changeTime"
								:end="endDate">
								{{form.starTime}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="must">*</view>
							<view class="name">欠薪发生结束时间</view>
						</view>
						<view class="form-content">
							<!-- <view class="example-body">
								<uni-datetime-picker :start="2021-3-20" v-model="form.salaryTime" type="daterange"
									@maskClick="maskClick($event,'date')" :end="form.date" />
							</view> -->
							<picker mode="date" value="YYYY-MM-DD" :value="form.endTime" @change="changeEndTime"
								:start="form.starTime" :end="endDate">
								{{form.endTime}}
							</picker>
							<image src="../../../static/home/more.png" class="arrow"></image>
						</view>
					</view>
					<view class="info-list">
						<view class="info-item" style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<!-- <view class="must">*</view> -->
								<view class="name">欠薪基本情况摘要</view>
							</view>
							<view class="formwork" @click="openItem">使用模板</view>
						</view>
						<textarea v-model="form.information" placeholder="请简述欠薪基本情况以方便调查人员核实处理" class="info-crl"
							maxlength="300"></textarea>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">是否曾经通过以下途径反映上述情况（可多选）</view>
						</view>
						<checkbox-group @change="checkboxChange">
							<label class="form-content" v-for="item in road" :key="item.id">
								<view style="margin-top: 30rpx;display: flex;">
									<checkbox :value="item.id" class="check" color="#027BFF" />
									<view>{{item.name}}</view>
								</view>
							</label>
						</checkbox-group>
					</view>
					<view class="info-list">
						<view class="info-item">
							<!-- <view class="must">*</view> -->
							<view class="name">证据材料上传({{form.pic.length+form.video.length}}/5)</view>
						</view>
						<view class="upload">
							<view v-for="(item,index) in form.pic" class="image-item">
								<image mode="aspectFit" :src="item" @click="previewImg(item)" class="img">
								</image>
								<view @click="closeImg(index,1)" style="display: inline;">
									<view class="iconfont">
										<image src="/static/home/delete.png" class="delete"></image>
									</view>
								</view>
							</view>
							<view v-for="(item,index) in form.video" class="image-item">
								<video id="myVideo" class="img"
									style="width: 190rpx;height: 200rpx;border-radius: 20rpx;" :src="item"
									@error="videoErrorCallback" show-fullscreen-btn></video>
								<view @click="closeImg(index,2)" style="display: inline;">
									<view class="iconfont">
										<image src="/static/home/delete.png" class="delete"></image>
									</view>
								</view>
							</view>
							<view class="upload-content" v-if="(form.pic.length+form.video.length)<5"
								@click="chooseMedia">
								<image src="/static/home/upload.png" class="upload"></image>
							</view>
							<!-- <view class="upload-content" v-if="form.pic.length<5" @click="chooseVideo">
								<image src="/static/home/upload3.png" class="upload"></image>
							</view> -->
						</view>
					</view>
				</template>
			</view>
			<view class="btn-item" @click="navigate1('/pages/index/complaint/complaint_detail?type='+form.type)"
				v-if="form.type==2">
				<view class="btn">下一步</view>
			</view>
			<view class="btn-item" @click="navigate('/pages/index/complaint/complaint_detail?type='+form.type)" v-else>
				<view class="btn">下一步</view>
			</view>



		</view>
		<view v-if="displayChoose" class="choose-block">
			<view class="choose-content">
				<view class="choose">
					<view class="choose-item">
						<view class="title">是否使用样例</view>
						<view class="text">{{content}}</view>
					</view>
					<view class="btn-item">
						<view class="btn3" @click="displayChoose=false">取消</view>
						<view class="btn2" @click="closeItem">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData,
		getCurrentTime,
		get24HoursTime,
		showToast
	} from '@/util/util.js'
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		validate
	} from '@/util/validate.js'
	import config from '@/config.js';
	import {
		getIndustryApi
	} from '@/api/mine.js'
	export default {
		data() {
			const currentTime = getCurrentTime('i');
			return {
				displayChoose: false,

				watch: {
					range(newval) {},
				},
				endDate: '',
				form: {
					reflectorName: '',
					reflectorMobile: '',
					isContract: 0,
					industryIndex: 1,
					salaryName: '',
					salaryMobile: '',
					actualLocation: '',
					address: '',
					unitName: '',
					salaryCount: '',
					salaryAmount: '',
					date: currentTime.substr(0, 10),
					information: '',
					pic: [],
					PDF: [],
					video: [],
					audio: [],
					projectName: '',
					constructionName: '',
					subpackageName: '',
					type: 1,
					salaryTime: currentTime.substr(0, 10),
					situation: [],
					idCardBack: '',
					idCardFront: '',
					isIndustry: '',
					starTime: '请选择欠薪发生开始时间',
					endTime: '请选择欠薪发生结束时间',

				},
				rules1: {
					isIndustry: {
						name: '所属行业',
						required: true
					},
					reflectorName: {
						name: '反映人姓名',
						required: true
					},
					idCardFront: {
						name: '身份证正面照',
						required: true
					},
					idCardBack: {
						name: '身份证反面照',
						required: true
					},
					reflectorMobile: {
						name: '反映人电话',
						required: true
					},

					actualLocation: {
						name: '实际用工所在地',
						required: true
					},

					salaryCount: {
						name: '欠薪人数',
						required: true
					},
					salaryAmount: {
						name: '欠薪金额',
						required: true
					},
				},
				rules: {
					isIndustry: {
						name: '所属行业',
						required: true
					},
					reflectorName: {
						name: '反映人姓名',
						required: true
					},
					idCardFront: {
						name: '身份证正面照',
						required: true
					},
					idCardBack: {
						name: '身份证反面照',
						required: true
					},
					reflectorMobile: {
						name: '反映人电话',
						required: true
					},
					projectName: {
						name: '拖欠工资项目名称',
						required: true
					},

					actualLocation: {
						name: '实际用工所在地',
						required: true
					},

					salaryCount: {
						name: '欠薪人数',
						required: true
					},
					salaryAmount: {
						name: '欠薪金额',
						required: true
					},
					startTime: {
						name: '欠薪发生开始时间',
						required: true
					},
					endTime: {
						name: '欠薪发生结束时间',
						required: true
					},
					// isContract: {
					// 	name: '是否签订劳动合同',
					// 	required: true
					// },
					// salaryName: {
					// 	name: '欠薪负责人姓名',
					// 	required: true
					// },
					// salaryMobile: {
					// 	name: '欠薪负责人电话',
					// 	required: true
					// },
					// address: {
					// 	name: '详细地址',
					// 	required: true
					// },
					// unitName: {
					// 	name: '单位名称',
					// 	required: true
					// },
					// salaryTime: {
					// 	name: '欠薪发生时间',
					// 	required: true
					// },
					// information: {
					// 	name: '欠薪基本情况摘要',
					// 	required: true
					// },
					// pic: {
					// 	name: '证据材料',
					// 	required: true
					// },
					// situation: {
					// 	name: '是否曾经通过以下途径反映上述情况',
					// 	required: true
					// }
				},
				content: '本人于XX年XX月至XX年XX月在XX单位从事XX工作，自XX年XX月开始XX单位拖欠工资，目前拖欠本人XX年XX月至XX年XX月的工资，共计XXXX元。',
				current: 0,
				type: 1,
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				areaList: [{
						id: 1,
						name: '工程建设领域'
					},
					{
						id: 2,
						name: '非工程建设领域'
					}
				],
				work: [{
						id: 1,
						value: '是'
					},
					{
						id: 2,
						value: '否'
					}
				],
				industry: [],
				industryIndex: -1,
				workIndex: -1,
				road: [{
						id: 1,
						name: '已向劳动保障监察机构举报投诉',
					},
					{
						id: 2,
						name: '已申请劳动争议仲裁'
					}, {
						id: 3,
						name: '已向人民法院提起诉讼'
					}, {
						id: 4,
						name: '其他途径'
					},
					{
						id: 5,
						name: '未曾经通过以上途径反映过欠薪问题'
					}
				],
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			navigate(url) {
				if (validate(this.form, this.rules)) {
					if (this.form.starTime !== '请选择欠薪发生开始时间' && this.form.endTime !== '请选择欠薪发生结束时间') {
						setStorage('form', this.form);
						uni.navigateTo({
							url
						})
					} else {
						showToast('请选择欠薪发生时间')
					}
				}
			},
			navigate1(url) {
				if (validate(this.form, this.rules1)) {
					if (this.form.starTime !== '请选择欠薪发生开始时间' && this.form.endTime !== '请选择欠薪发生结束时间') {
						setStorage('form', this.form);
						uni.navigateTo({
							url
						})
					} else {
						showToast('请选择欠薪发生时间')
					}
				}
			},
			changeTime(e) {
				this.form.starTime = e.detail.value
			},
			changeEndTime(e) {
				this.form.endTime = e.detail.value
			},
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				//year = year + 2;
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.endDate = year + '-' + month + '-' + day;
			},
			getIndustry() {
				getIndustryApi({}).then((res) => {
					this.industry = res
				})
			},
			radioChange(e) {
				this.form.type = e.detail.value
				this.type = e.detail.value
				for (let i = 0; i < this.areaList.length; i++) {
					if (this.areaList[i].value === e.detail.value) {
						this.current = i;
						break;
					}
				}
				this.form.unitName = ''
			},
			openItem() {
				this.displayChoose = true
			},
			closeItem() {
				this.displayChoose = false
				this.form.information = this.content
			},
			bindWork(e) {
				this.workIndex = e.detail.value;
				this.form.isContract = this.work[this.workIndex].id
			},
			//所属行业
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
			},
			bindTimePicker(e, name) {
				const value = name == 'time' ? get24HoursTime(e.detail.value) : e.detail.value;
				this.form[name] = value;
				this.form.date = this.form.date
			},
			maskClick(e) {
				this.form.date = this.form.date
			},
			checkboxChange(e) {
				this.form.situation = e.detail.value
			},
			//选择位置
			chosenPosition() {
				//获取当前位置
				var that = this;
				const currentLocation = uni.getLocation({
					isHighAccuracy: true,
					success(current) {
						const currentLatitude = current.latitude;
						const currentLongitude = current.longitude;
						uni.chooseLocation({
							latitude: currentLatitude,
							longitude: currentLongitude,
							success: (choosen) => {
								delete choosen.errMsg;
								//console.log(choosen);
								that.form.actualLocation = choosen.address;
								that.form.latitude = choosen.latitude;
								that.form.longitude = choosen.longitude;
							},
							fail: (err) => {
								showToast('选择位置失败，请重试！');
							}
						})
					},
					fail: (e) => {
						showToast('获取位置失败，请重试！');
					}
				})
			},
			chooseImage(e) {
				let login = getStorage('login');
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						res.tempFilePaths.forEach(item => {
							let filePath = item
							uni.showLoading({
								title: '上传中',
								mask: true
							})
							uni.uploadFile({
								url: config.requestUrl + 'szwq/upload', //post请求的地址
								filePath: filePath,
								name: 'file',
								header: {
									'authori-zation': login.token
								},
								success: (myres) => {
									uni.hideLoading()
									const data = JSON.parse(myres.data);
									if (data.code == 200) {
										if (e == 1) {
											this.form.idCardFront = data.data
										}
										if (e == 2) {
											this.form.idCardBack = data.data
										}
									} else {
										uni.hideLoading()
										showToast('上传失败');
									}
								}
							})
						})
					}
				})
			},

			// 上传视频和图片
			chooseMedia(e) {
				let login = getStorage('login');
				uni.chooseMedia({
					maxDuration: 60,
					count: 5 - this.form.pic.length,
					mediaType: ['image', 'video'],
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (res.length < 2) { // 小于2则没有选择图片
							uni.hideLoading()
							return
						}
						let filePath = res.tempFiles[0].tempFilePath;
						let that1 = this;
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uni.uploadFile({
							url: config.requestUrl + 'jtwq/uploadEvidence', //post请求的地址
							filePath: filePath,
							name: 'file',
							header: {
								'authori-zation': login.token
							},
							success: (myres) => {
								uni.hideLoading()
								const data = JSON.parse(myres.data);
								if (data.code == 200) {
									console.log(data)
									if (data.data.fileType == 1) {
										this.form.pic.push(data.data.url)
									} else if (data.data.fileType == 2) {
										this.form.video.push(data.data.url)
									} else if (data.data.fileType == 3) {
										this.form.audio.push(data.data.url)
									} else if (data.data.fileType == 4) {
										this.form.PDF.push(data.data.url)
									}

								} else {
									uni.hideLoading()
									showToast('上传失败');
								}
							}
						})
						// })
					}
				})
			},
			// 删除图片
			closeImg(index, e) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前文件',
					success: function(res) {
						if (res.confirm) {
							if (e == 1) {
								that.form.pic.splice(index, 1);
							} else if (e == 2) {
								that.form.video.splice(index, 1);
							} else if (e == 3) {
								that.form.audio.splice(index, 1);
							} else if (e == 4) {
								that.form.PDF.splice(index, 1);
							}


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
		onShow() {
			if (getStorage('form')) {
				this.form = getStorage('form');
				this.workIndex = this.form.isContract - 1
				this.industry.forEach((item, index) => {
					if (this.form.isIndustry == item.id) {
						this.industryIndex = index
						return
					}
					return
				})
				this.current = this.form.type - 1
				for (var i = 0, lenI = this.road.length; i < lenI; i++) {
					const item = this.road[i]
					this.form.situation.forEach((item1) => {
						if (item1 == item.id) {
							item.checked = true;
						} else {
							item.checked = false;
						}
					})
				}
			}
		},
		onLoad() {
			this.custom = getCustomNavData();
			this.getIndustry()
			this.getDate()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.example-body {
			width: 100%;
			// background-color: red;
			padding: 10rpx;
			// border: 1px solid #767676;
			margin-top: 10rpx;
		}

		::v-deep {

			.uni-date-x {
				background-color: #F1F7FF;
			}

			.uni-date-range {
				background-color: #F1F7FF;
			}
		}

		.top-img {
			width: 100%;
		}

		.info-block {
			display: flex;
			flex-direction: column;
			background: #F5F5F5;
			margin-top: -200rpx;
			border-radius: 60rpx;
			position: relative;
			padding: 30rpx;

			.menu-block {
				display: flex;
				background: #F1F7FF;
				border-radius: 30rpx;
				position: relative;
				padding: 40rpx;
				justify-content: center;

				.menu-item1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.round {
						width: 50rpx;
						height: 50rpx;
						color: #fff;
						border-radius: 50%;
						background-color: #027BFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.txt {
						color: #027BFF;
						font-size: 32rpx;
						margin-top: 20rpx;
					}
				}

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.round {
						width: 50rpx;
						height: 50rpx;
						color: #fff;
						border-radius: 50%;
						background-color: #D8D8D8;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.txt {
						color: #D8D8D8;
						font-size: 32rpx;
						margin-top: 20rpx;
					}
				}

				.line {
					width: 100rpx;
					height: 2rpx;
					background-color: #D8D8D8;
					margin-top: 30rpx;
				}
			}

			.text-block {
				height: auto;
				display: flex;
				flex-direction: column;
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #F1F7FF;
				margin-top: 30rpx;
				// background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dh_mashangweiquan/bg-img.png') repeat;

				.info-list:last-child {
					border-bottom: none;
				}

				.info-list {
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 20rpx;
					margin-top: 20rpx;

					.img-item {
						display: flex;
						margin-top: 20rpx;

						.obverse-item {
							width: calc((100% - 30rpx) /2);
							margin-right: 30rpx;

							.upload-img {
								width: 100%;
								border-radius: 10rpx;
								height: 200rpx !important;
							}
						}

						.obverse-item:last-child {
							margin-right: 0;
						}
					}

					.info-item {
						display: flex;
						align-items: center;

						.must {
							color: #EA0000;
						}

						.formwork {
							color: #027BFF;
						}
					}

					.upload {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;

						.image-item {
							margin-top: 20rpx;
							margin-right: 20rpx;
							display: flex;
							flex-direction: row;
							// box-sizing: border-box;
							// border: 1px solid #efefef;

							.img {
								width: 190rpx;
								height: 200rpx;
								border-radius: 20rpx;
							}

							.iconfont {
								.delete {
									width: 20px;
									height: 20px;
									position: absolute;
									margin-left: -30rpx;
								}
							}
						}

						.image-item:nth-child(3n) {
							margin-right: 0;
						}

						.delete-item {
							width: 100%;
							display: flex;
							justify-content: flex-end;

							.delete {
								width: 20px;
								height: 20px;
								position: absolute;
							}
						}

						.image-item1 {
							display: flex;
							flex-direction: row;

							.delete {
								margin-top: 10rpx;
								margin-left: -40rpx;
								width: 20px;
								height: 20px;
								position: absolute;
							}
						}

						.upload-content {
							position: relative;
							background: #fafafa;
							border-radius: 5px;
							width: 200rpx;
							height: 200rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 20rpx;

							.title {
								position: absolute;
								top: 50%;
								left: 50%;
							}

							.upload {
								width: 90rpx;
								height: 90rpx;
							}
						}
					}

					.form-content {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;

						.check {
							transform: scale(0.7);
						}

						.form-ctrl {
							height: 80rpx;
							line-height: 80rpx;
							flex-grow: 1;
							color: #767676;
						}

						.arrow {
							flex-grow: 0;
							width: 40rpx;
							height: 40rpx;
						}
					}

					.radio-list {
						.radio-item {
							margin-top: 30rpx;

							.check {
								transform: scale(0.7);
							}
						}
					}

					.info-crl {
						margin-top: 30rpx;
					}
				}
			}

			.btn-item {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 50rpx;
				margin-top: 60rpx;

				.btn {
					width: 360rpx;
					height: 80rpx;
					background: #027BFF;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60rpx;
				}
			}
		}

		.choose-block {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999;
			width: 100vw;
			height: 100vh;

			.choose-content {
				width: 80%;
				height: auto;
				background: #fff;
				z-index: 9999;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 38%;
				display: flex;
				flex-direction: column;
				box-shadow: 0 0 10px 0px #dadada;


				.choose {
					display: flex;
					flex-direction: column;
					background-color: #fff;
					border-radius: 30rpx;

					.choose-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 30rpx;

						.title {
							text-align: center;
							margin: 20rpx auto;
						}

						.text {
							margin-top: 20rpx;
							display: flex;
							justify-content: center;
						}
					}

					.btn-item {
						display: flex;
						height: 80rpx;
						width: 100%;
						border-top: 1px solid #dadada;

						.btn3 {
							display: flex;
							justify-content: center;
							align-items: center;
							width: calc(100% / 2);
							border-right: 1px solid #dadada;
						}

						.btn2 {
							display: flex;
							justify-content: center;
							align-items: center;
							width: calc(100% / 2);
						}
					}
				}

				.btn1 {
					margin-top: 50rpx;
					height: 60rpx;
					width: 300rpx;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
				}
			}
		}
	}
</style>